<template>
  <div class="chose-select" @click="isShowClick = !isShowClick" @mouseleave="isShowClick = false">
    <div class="select-name">
      <div v-if="showChoseObj.name">
        {{ showChoseObj.name ? showChoseObj.name : '' }}
      </div>
      <div v-else style="color: #b9b9b9">请选择</div>
      <span :class="[isShowClick ? 'click-span' : '']">&gt;</span>
    </div>
    <div v-show="isShowClick" class="select-chose">
      <ul v-if="props.list && props.list.length" class="select-chose-list">
        <li
          v-for="(item, index) in props.list"
          :key="item.id ? item.id : index"
          :title="item.name"
          :class="[showChoseObj?.value && showChoseObj?.value === item.value ? 'chose-li' : '']"
          @click="doClick(index, item.id as never, item)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import { useStore } from 'vuex';
import { ref, onMounted, nextTick, watch } from 'vue'

const emits = defineEmits(['click'])
type ChoseListType = {
  name: string
  value: string | number
  id?: string | number
}
interface PropsType {
  list: Array<ChoseListType> // 选择列表
  defaultValueKey?: number | null // 默认参数值
  defaultValue?: number | null | string // 默认数值
}
const props = withDefaults(defineProps<PropsType>(), {
  list: () => [],
  defaultValueKey: null,
  defaultValue: null
})
const showChoseObj = ref<any>({})
const isShowClick = ref<boolean>(false)
const doClick = (index: number, id: string | number, item: ChoseListType) => {
  isShowClick.value = false
  isShowClick.value = !isShowClick.value
  showChoseObj.value = { ...item, index }
  emits('click', { index, id, item })
}

onMounted(() => {
  nextTick(() => {
    if (props.defaultValueKey || props.defaultValueKey === 0 || props.defaultValue) {
      if (props.defaultValueKey + '' || props.defaultValue) {
        let findCurr = props.list.find(
          (item, key) => key === props.defaultValueKey || item.value === props.defaultValue
        )
        if (findCurr) {
          showChoseObj.value = { ...findCurr, index: props.defaultValueKey }
        }
        // showChoseObj.value
      }
    }
  })
})
watch(
  () => props.list,
  (val) => {
    if (props.defaultValueKey || props.defaultValueKey === 0) {
      if (props.defaultValueKey + '') {
        let findCurr = props.list.find((item, key) => key === props.defaultValueKey)
        if (findCurr) {
          showChoseObj.value = { ...findCurr, index: props.defaultValueKey }
        }
      }
    }
  },
  {
    deep: true
  }
)
</script>
<style lang="scss" scoped>
.chose-select {
  min-width: 80vw * $Bw;
  height: 30vh * $Bh;
  border: 1px solid #346c9a;
  position: relative;
  border-radius: 4vw * $Bw 4vh * $Bh;
  z-index: 4;
  .select-name {
    width: 100%;
    height: 100%;
    line-height: 30vh * $Bh;
    color: white;
    // font-weight: bold;
    text-align: center;
    cursor: pointer;
    padding: 0 30vw * $Bw 0 3vw * $Bw;
    box-sizing: border-box;
    position: relative;
    div {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    span {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 10vw * $Bw;
      transition: all 0.3s;
    }
    .click-span {
      transform: rotate(90deg);
    }
  }
  .select-chose {
    width: 100%;
    height: auto;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(5, 60, 122, 0.9);
    transition: all 0.3s;
    &-list {
      width: 100%;
      height: auto;
      color: #f1f1f2;
      padding: 8vh * $Bh 0;
      box-sizing: border-box;
      li {
        width: 100%;
        height: 30vh * $Bh;
        text-align: center;
        cursor: pointer;
        line-height: 30vh * $Bh;
        font-size: 16vh * $Bh;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .chose-li {
        background: rgba(28, 46, 120, 0.6);
        color: #229bec;
        font-weight: bold;
      }
      li:hover {
        color: #0d9bff;
        background: rgba(28, 46, 110, 0.8);
      }
    }
  }
}
</style>
